<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<caption-me id="caption-me" href="http://www.baidu.com">
			</caption-me>
			<caption-me id="caption-me1" href="http://www.baidu.com">
				<p style="background-color: goldenrod;text-align: center;">百度</p>
			</caption-me>
			
		</div>
		
	</body>
	<script>
		// 插槽内可以包含任何模板代码
		var caption={
			props: ['href'],
			template: `
				<a v-bind:href="href"><slot>链接{{captiondata}}</slot></a>
				`,
			data:function(){
				return {
					captiondata:"提示信息"
				}
			}
		}
		var app=new Vue({
			el:'#app',
			data:{
				captiondata:"提示"
			},
			components:{
				'caption-me':caption
			}
		})
	</script>
</html>
